<script setup lang="ts">
  import { ref } from 'vue'
  import smsTemplateDetailService from '../services/detail'

  const { smsTemplateDetail, getSmsTemplateDetailLoading, getSmsTemplateDetailFn } =
    smsTemplateDetailService

  const props = defineProps({
    smsTemplateId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗状态
  const modalVisible = ref(false)

  // 是否启用
  const status = ref(false)

  // 显示弹窗
  // 因为status为false是启用，绑定到switch开关组件时是显示关闭的状态，使用起来就不流畅，所以需要将status取反
  const onShowModal = async () => {
    modalVisible.value = true
    await getSmsTemplateDetailFn(props.smsTemplateId)
    status.value = !smsTemplateDetail.value.status
  }

  // 关闭弹窗
  const onClose = () => {
    modalVisible.value = false
  }
</script>

<template>
  <div>
    <div style="display: inline-block" @click="onShowModal">
      <slot></slot>
    </div>

    <h-dialog
      @close="onClose"
      title="短信模版详情"
      v-model="modalVisible"
      :loading="getSmsTemplateDetailLoading"
      :width="800"
    >
      <div class="info_list" v-if="smsTemplateDetail">
        <!--模版名称-->
        <div class="info_item">
          <div class="label">模版名称:</div>
          <div class="value">{{ smsTemplateDetail.name }}</div>
        </div>

        <!--模版类型-->
        <div class="info_item">
          <div class="label">模版类型:</div>
          <div class="value">
            <template v-if="smsTemplateDetail.type === 1">验证类短信</template>
            <template v-else-if="smsTemplateDetail.type === 2">通知类</template>
            <template v-else>推广类</template>
          </div>
        </div>

        <!--模版编号-->
        <div class="info_item">
          <div class="label">模版编号:</div>
          <div class="value">{{ smsTemplateDetail.code }}</div>
        </div>

        <!--发布状态-->
        <div class="info_item">
          <div class="label">发布状态:</div>
          <div class="value">
            <HStatus v-if="smsTemplateDetail.release">
              <span style="font-size: 12px">已发布</span>
            </HStatus>
            <HStatus v-else type="info">
              <span style="font-size: 12px">已下架</span>
            </HStatus>
          </div>
        </div>

        <!--是否启用-->
        <div class="info_item">
          <div class="label">是否启用:</div>
          <div class="value">
            <HStatus v-if="status">
              <span style="font-size: 12px">启用</span>
            </HStatus>
            <HStatus type="info" v-else>
              <span style="font-size: 12px">禁用</span>
            </HStatus>
          </div>
        </div>

        <!--模版内容-->
        <div class="info_item">
          <div class="label">模版内容:</div>
          <div class="value">{{ smsTemplateDetail.content }}</div>
        </div>
      </div>

      <template #footer>
        <HButton is-modal @click="onClose">关闭</HButton>
      </template>
    </h-dialog>
  </div>
</template>

<style scoped lang="scss">
  .info_list {
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .info_item {
      display: flex;
      column-gap: 5px;
      align-items: center;

      .label {
        width: 52px;
        color: #606266;
      }
    }
  }
</style>
